<template>
	<div class="index">
		<div class="header">
			<img :src="`${$router.options.base}img/nav-img.png`" alt="" width="100%" height="180px" />
			<div class="title">
				<p>
					{{ $website.name }}<br />
					<small>{{ $website.subName }}</small>
				</p>
			</div>
			<div class="login-userInfo">
				<el-avatar size="large" :src="avatar"></el-avatar>
				<el-dropdown @command="handleCommand">
					<span class="el-dropdown-link">
						{{ userName }}
						<i class="el-icon-arrow-down el-icon--right"></i>
					</span>
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item divided command="list"> 看板列表 </el-dropdown-item>
						<el-dropdown-item command="logout"> 退出登录 </el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
			</div>
			<navs @change="handleChange"></navs>
		</div>
		<div class="main" v-if="activeName == 0">
			<list></list>
		</div>
		<el-scrollbar class="main">
			<componentList v-if="activeName == 1"></componentList>
			<!-- <maps v-if="activeName == 2"></maps> -->
			<category v-else-if="activeName == 2"></category>
			<db v-else-if="activeName == 3"></db>
			<document v-else-if="activeName == 4"></document>
		</el-scrollbar>
	</div>
</template>
<script>
import list from './list/index';
import componentList from './list/componentList';
import maps from './list/map';
import category from './list/category';
import db from './list/db';
import document from './list/document';
import navs from './nav/index';
import { mapState, mapGetters } from 'vuex';
export default {
	name: 'index',
	components: {
		navs,
		list,
		componentList,
		maps,
		category,
		db,
		document
	},
	data() {
		return {
			activeName: 0
		};
	},
	computed: {
		...mapState(['token', 'tenantId', 'siteId']),
		...mapGetters(['avatar', 'userName', 'userId'])
	},
	methods: {
		handleChange(nav, index) {
			this.activeName = index;
		},
		handleCommand(command) {
			if (command == 'logout') {
				// this.$store.dispatch('LogOut').then(() => {
				this.$router.push({ path: '/home' });
				// });
			}
			if (command == 'list') {
				this.$router.push({ path: '/' });
			}
		}
	}
};
</script>
<style lang="scss">
.index {
	height: 100%;
	.header {
		position: relative;
		.nav {
			margin: 0 20px;
			width: 100%;
			position: absolute;
			bottom: 10px;
			border: none;
			.el-menu-item {
				background-color: rgba(0, 0, 0, 0) !important;
			}
		}
		.title {
			position: absolute;
			top: 30px;
			left: 20px;
			font-size: 48px;
			font-style: oblique;
			color: rgb(0, 186, 255);
			font-weight: bold;
			line-height: 35px;
		}
		.login-userInfo {
			position: absolute;
			top: 30px;
			right: 20px;
			font-size: 48px;
			font-weight: bold;
			line-height: 35px;
			display: flex;
			align-items: center;
			.el-avatar {
				margin-right: 10px;
			}
			.el-dropdown {
				color: #fff;
			}
		}
		.title small {
			font-size: 18px;
			color: #9cb4c2;
		}
	}
	.main {
		width: 100%;
		height: calc(100% - 184px);
	}
}
</style>
